<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>BI大屏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/css/bootstrap.min.css" type="text/css"
        rel="stylesheet" />
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap-daterangepicker/3.0.1/daterangepicker.min.css"
        type="text/css" rel="stylesheet" />

    <!-- 1. 首先加载 jQuery -->
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"
        type="application/javascript"></script>

    <!-- 2. 加载 moment.js（daterangepicker的依赖） -->
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/moment.js/2.29.1/moment.min.js"
        type="application/javascript"></script>

    <!-- 3. 加载 Bootstrap 及其依赖 -->
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/js/bootstrap.bundle.min.js"
        type="application/javascript"></script>

    <!-- 4. 加载 daterangepicker -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap-daterangepicker/3.0.1/daterangepicker.min.js"
        type="application/javascript"></script>

    <!-- 5. 加载其他库 -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=e987c6438189df2e50b5890b809d98e4"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"
        type="application/javascript"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0/echarts.min.js"
        type="application/javascript"></script>

    <style>
        .root-web {
            position: relative;
        }

        #map-container {
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 99;
        }

        #user-distribution {
            width: 100%;
            height: 400px;
        }

        .w10 {
            width: 20%;
            margin-right: 10px;
        }

        .full-screen-btn {
            position: fixed;
            z-index: 9999;
            right: 20px;
            bottom: 20px;
        }

        .foot_block {
            position: fixed;
            bottom: 30px;
            width: 100%;
            left: 0;
            z-index: 999;
        }

        .dataView {
            width: 100%;
            height: 600px;
        }
    </style>
</head>

<body>
    <div class="root-web">
        <div class="header">
            <!-- nav -->
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <div class="container">
                    <a class="navbar-brand" href="#">BI大屏</a>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"
                                aria-controls="offcanvasExample">地区热力</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" onclick="toggleFullScreen()">全屏显示</a>
                        </li>
                        {if $isLoggedIn}
                        <!-- <li class="nav-item">
                            <a class="nav-link" href="#" onclick="getAddress(false)">关闭效果</a>
                        </li> -->
                        <li class="nav-item">
                            <a class="nav-link" href="#" onclick="logout()">退出登录</a>
                        </li>
                        {/if}
                        {if !$isLoggedIn and $open==1}
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">登录</a>
                        </li>
                        {/if}
                    </ul>
                </div>
            </nav>
        </div>
        {if $isLoggedIn}
        <!-- 下方模块 -->
        <div class="foot_block">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 mb-2">
                        <div class="card">
                            <div class="card-body">
                                <!-- **新增：时间范围选择** -->
                                <div class="mb-3">
                                    <label for="dateRange" class="form-label">选择时间范围：</label>
                                    <input type="text" class="form-control" id="dateRange" placeholder="请选择日期范围"
                                        readonly>
                                    <div class="mt-2">
                                        <button class="btn btn-sm btn-outline-secondary me-2"
                                            onclick="setDateRange('today')">今天</button>
                                        <button class="btn btn-sm btn-outline-secondary me-2"
                                            onclick="setDateRange('yesterday')">昨天</button>
                                        <button class="btn btn-sm btn-outline-secondary me-2"
                                            onclick="setDateRange('last7days')">最近7天</button>
                                        <button class="btn btn-sm btn-outline-secondary"
                                            onclick="setDateRange('last30days')">最近30天</button>
                                        <!-- 添加1年的数据 -->
                                         <button class="btn btn-sm btn-outline-secondary"
                                            onclick="setDateRange('last365days')">最近365天</button>
                                    </div>
                                </div>
                                <!-- 昨日总新增用户 -->
                                <div class="card-title">总新增用户</div>
                                <div class="card-text">
                                    <h1 class="text-danger" id="newUser"></h1>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-4 mb-2">
                        <div class="card">
                            <div class="card-body">
                                <!-- 各个镇区数据 -->
                                <div class="card-title">各镇新增用户</div>
                                <div class="card-text">
                                    <ul id="newUserTown"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-2">
                        <div class="card">
                            <div class="card-body">
                                <!-- 昨日订单数据 -->
                                <div class="card-title">订单数据</div>
                                <div class="card-text">
                                    <ul id="orderTown"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加区域订单历史数据表弹出层 -->
        <div class="modal fade" id="orderHistory" tabindex="-1" aria-labelledby="orderHistoryLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 id="orderHistoryTitle"></h1>
                    </div>
                    <div class="modal-body dataView" id="countData">
                    </div>
                </div>
            </div>
        </div>
        <!-- 区域用户历史数据表弹出层 -->
        <div class="modal fade" id="userHistory" tabindex="-1" aria-labelledby="userHistoryLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 id="userHistoryTitle"></h1>
                    </div>
                    <div class="modal-body dataView" id="userCountData">
                    </div>
                </div>
            </div>
        </div>
        {/if}
        <div id="map-container"></div>
    </div>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample"
        aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">地区热力</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul id="user-distribution" class="list-group">
            </ul>
        </div>
    </div>

    <!-- 退出全屏显示 -->
    <div class="full-screen-btn" style="display: none;">
        <button class="btn btn-dark" onclick="toggleFullScreen()">退出全屏显示</button>
    </div>

    {if $open==1}

    <!-- 显示登录弹窗默认打开 -->
    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="loginModalLabel">登录</h5>
                </div>
                <div class="modal-body">
                    <form id="myForm" method="post">
                        <div class="row">
                            <div class="col">
                                <label for="password" class="form-label">密码</label>
                                <input type="password" id="password" class="form-control form-control-lg"
                                    placeholder="Enter password" name="password"></input>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">登录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            {if !$isLoggedIn}
            $('#loginModal').modal('show');
            {/if}

            // 登录功能
            $("#myForm").submit(function (event) {
                event.preventDefault();

                var password = $('#password').val();
                if (password == '') {
                    alert('密码不能为空');
                    return;
                }
                $.ajax({
                    url: '/index/login',
                    type: 'POST',
                    data: {
                        password: password
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.code == 200) {
                            $('#loginModal').modal('hide');
                            window.location.reload();
                        } else {
                            alert(res.msg);
                        }
                    },
                    error: function (xhr, status, error) {
                        // 请求失败
                        alert("发送数据失败！");
                        console.error(error);
                    }
                })
            });
        });
    </script>
    {/if}


    <script>
        // 初始地图中心点和缩放级别
        const initialCenter = [111.111795, 21.735458];
        const initialZoom = 10;
        // 地图样式列表
        const mapStylesList = {
            'default': 'amap://styles/default',
            'darkblue': 'amap://styles/darkblue',
            'light': 'amap://styles/light',
            'night': 'amap://styles/night',
            'blue': 'amap://styles/blue',
            'grey': 'amap://styles/grey',
            'red': 'amap://styles/red',
            'pink': 'amap://styles/pink',
        }
        const mapStyle = mapStylesList['darkblue'];

        var map = new AMap.Map('map-container', {
            zoom: initialZoom,
            center: initialCenter, // 霞洞
            mapStyle// 风格
        });
        // 创建热力图图层
        var heatmap;
        var markers = []; // 用于存储所有 Marker
        let currentStartDate, currentEndDate; // 用于存储当前日期范围，避免重复获取

        $(document).ready(function () {
            // 初始化日期选择器
            $('#dateRange').daterangepicker({
                locale: {
                    format: 'YYYY-MM-DD',
                    separator: ' 至 ',
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '从',
                    toLabel: '到',
                    customRangeLabel: '自定义',
                    weekLabel: 'W',
                    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月'
                    ],
                    firstDay: 1
                },
                startDate: moment().subtract(7, 'days'),
                endDate: moment(),
                maxDate: moment(),
                opens: 'right',
                autoApply: true
            }, function (start, end) {
                // 日期选择回调
                currentStartDate = start.format('YYYY-MM-DD');
                currentEndDate = end.format('YYYY-MM-DD');
                refreshData(currentStartDate, currentEndDate);
            });

            // 默认加载最近7天数据
            setDateRange('last7days');
            getAddress(true); // 页面加载时，开启热力图
        });

        // 快捷日期选择
        function setDateRange(range) {
            let start, end;
            switch (range) {
                case 'today':
                    // 今天0点到今天23:59:59
                    start = moment();   // 今天 00:00:00
                    end = moment().add(1, 'days').endOf('day');     // 今天 23:59:59
                    break;
                case 'yesterday':
                    // 昨天0点到昨天23:59:59
                    start = moment().subtract(1, 'days').startOf('day'); // 昨天 00:00:00
                    end = moment();
                    break;
                case 'last7days':
                    start = moment().subtract(6, 'days');
                    end = moment();
                    break;
                case 'last30days':
                    start = moment().subtract(29, 'days');
                    end = moment();
                    break;
                // 1年内数据
                case 'last365days':
                    start = moment().subtract(365, 'days');
                    end = moment();
                    break;

            }
            $('#dateRange').data('daterangepicker').setStartDate(start);
            $('#dateRange').data('daterangepicker').setEndDate(end);
            currentStartDate = start.format('YYYY-MM-DD');
            currentEndDate = end.format('YYYY-MM-DD');
            refreshData(currentStartDate, currentEndDate);
        }

        // 刷新数据
        function refreshData(startDate, endDate) {
            // 清空现有数据
            $('#newUserTown').empty();
            $('#orderTown').empty();
            $('#newUser').empty();
            $('#user-distribution').empty(); // 清空用户分布列表

            // 并行请求数据
            Promise.all([
                fetchNewUserData(startDate, endDate),
                fetchOrderData(startDate, endDate),
                fetchCityData(startDate, endDate)
            ]).then(() => {
                // 所有数据加载完成后更新地图
                getAddress(true);
            });
        }

        // 获取新用户数据
        function fetchNewUserData(startDate, endDate) {
            return axios.get(`/index/newUser?start_time=${startDate}&end_time=${endDate}`)
                .then(response => {
                    const data = response.data;
                    if (data.code == 200) {
                        let total = 0;
                        data.data.forEach(item => {
                            total += parseInt(item.new_users_count);
                            $('#newUserTown').append(
                                `<li class="list-group-item">
                                    <a href="javascript:;" onClick="getUsersHistory(${item.tid},'${item.tname}')">
                                        <span class="badge bg-danger w10">${item.new_users_count}人</span>${item.tname}
                                    </a>
                                </li>`
                            );
                        });
                        $('#newUser').html(`${total}人`);
                    } else {
                        $('#newUser').html('<div class="alert alert-danger" role="alert">获取用户数据失败</div>');
                    }
                })
                .catch(error => {
                    console.error('Error fetching user data:', error);
                    $('#newUser').html('<div class="alert alert-danger" role="alert">获取用户数据失败</div>');
                });
        }

        // 获取订单数据
        function fetchOrderData(startDate, endDate) {
            return axios.get(`/index/getOrder?start_time=${startDate}&end_time=${endDate}`)
                .then(response => {
                    const data = response.data;
                    if (data.code == 200) {
                        data.data.forEach(item => {
                            $('#orderTown').append(
                                `<li class="list-group-item">
                                    <a href="javascript:;" onClick="getOrderHistory(${item.tid},'${item.tname}')">
                                        <span class="badge bg-danger w10">${item.yesterday_order_count}单</span>${item.tname}
                                    </a>
                                </li>`
                            );
                        });
                    }
                })
                .catch(error => {
                    console.error('Error fetching order data:', error);
                });
        }

        // 获取用户分布数据
        function fetchCityData(startDate, endDate) {
            const url = `/index/getCity?start=${startDate}&end=${endDate}`;
            return axios.get(url)
                .then(response => {
                    const data = response.data;
                    data.forEach(item => {
                        if (item.count < 5) {
                            return;
                        }
                        var li = document.createElement('li');
                        li.className = 'list-group-item';
                        li.innerHTML =
                            `<span class="badge bg-danger w10">${item.count}</span>${item.buildschoolname}-${item.des}`;
                        document.getElementById('user-distribution').appendChild(li);
                    });
                })
                .catch(error => {
                    console.error('Error fetching user distribution:', error);
                });
        }

        function getAddress(openE = true) {  // 修改：默认关闭效果
            // 清除之前的热力图和Marker
            if (heatmap) {
                resetMap(heatmap);
            }

            if (!openE) {
                resetMap();
            };
            // 获取用户地址数据并显示在地图上
            axios.get('/index/getAddress')
                .then(response => {
                    const data = response.data;
                    // 创建热力图数据
                    const heatmapData = data.map(user => ({
                        lng: user.lng,
                        lat: user.lat,
                        count: 2 // 可以根据实际情况设置权重
                    }));


                    map.plugin(["AMap.HeatMap"], function () {
                        heatmap = new AMap.HeatMap(map, {
                            radius: 25, //  热力半径
                            opacity: [0, 0.8] // 热力透明度
                        });

                        // 设置热力图数据
                        heatmap.setDataSet({
                            data: heatmapData,
                            max: 10 //  设置最大权重 (根据你的数据调整)
                        });

                        // setDynamicEffect(openE); //  控制是否开启动态效果
                    });



                    {if $isLoggedIn and 1==0}
                    // 如果不需要显示 Marker，则注释掉以下代码
                    data.map(user => {
                        // 不存在的数据 跳过
                        if (!user.lng || !user.lat || user.lng=='undefined' || user.lat=='undefined') {
                            return;
                        }
                        var marker = new AMap.Marker({
                            position: [user.lng, user.lat],
                            title: user.address_detail,
                            extData: {
                                name: user.name,
                                address_detail: user.address_detail,
                                phone: user.phone,
                                address: user.address
                            } // 存储用户
                        });

                        marker.on('click', function (e) {
                            // 点击marker显示用户信息
                            // console.log('Clicked user ID:', e.target.getExtData().name);
                            // 显示高德地图窗口信息
                            var info = [];
                            info.push(
                                "<div stytle=\"margin-buttom:20px;padding:10px\"><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> "
                            );
                            info.push("<div><b>" + e.target.getExtData().address_detail + "</b></div>");
                            info.push("<div><b>" + e.target.getExtData().address + "</b></div>");
                            info.push("<div><b>" + e.target.getExtData().name + "</b>");
                            info.push("<div><b>" + e.target.getExtData().phone + "</b></div></div>");
                            infoWindow = new AMap.InfoWindow({
                                content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
                            });
                            infoWindow.open(map, e.target.getPosition());


                        });

                        map.add(marker);
                        markers.push(marker);  // 将 marker 添加到数组中
                    });
                    {/if}
                })
                .catch(error => {
                    console.error('Error fetching user addresses:', error);
                });
        }

        // 重置地图
        function resetMap(markers) {
            // 1. 重置中心点和缩放级别
            map.setCenter(initialCenter);
            map.setZoom(initialZoom);

            // 2. 移除所有 Marker
            map.remove(markers);
            markers = []; // 清空数组

            // 3. 关闭热力效果
            //setDynamicEffect(false);
        }

        // 退出全屏显示功能
        function toggleFullScreen() {
            if (!document.fullscreenElement) {
                // 进入全屏
                document.documentElement.requestFullscreen();
                document.querySelector('.full-screen-btn').style.display = 'block';
                document.querySelector('.header').style.display = 'none';
            } else {
                // 退出全屏
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                    document.querySelector('.full-screen-btn').style.display = 'none';
                    document.querySelector('.header').style.display = 'block';
                }
            }
        }
        // 退出登录功能
        function logout() {
            $.ajax({
                url: '/index/logout',
                type: 'POST',
                success: function (res) {
                    if (res.code == 200) {
                        alert('退出成功');
                        window.location.reload();
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (xhr, status, error) {
                    alert("发送数据失败！");
                }
            })
        }
        {if $isLoggedIn}
        // 添加区域订单历史数据表
        function getOrderHistory(tid, tname) {
            $('#orderHistoryTitle').html('<h5 class="card-title">【' + tname + '】订单历史</h5>');

            // 获取当前选择的日期范围
            let startDate = $('#dateRange').data('daterangepicker').startDate.format('YYYY-MM-DD');
            let endDate = $('#dateRange').data('daterangepicker').endDate.format('YYYY-MM-DD');

            axios.get(`/index/getOrderHistory?tid=${tid}&start_time=${startDate}&end_time=${endDate}`)
                .then(response => {
                    const data = response.data;

                    if (data.code == 200) {
                        // 清空#countData里的内容
                        // $('#countData').html('');

                        // 检查数据是否存在
                        if (data.data && Array.isArray(data.data)) {
                            // 提取 date 和 count 数据
                            const dateData = data.data.map(item => item.date);
                            const countData = data.data.map(item => Number(item.count)); // 转换为数字

                            // 确保 date 和 count 的长度一致
                            if (dateData.length !== countData.length) {
                                console.error("日期和订单量数据长度不一致！");
                                return; // 停止执行，防止 ECharts 渲染错误
                            }


                            // 获取 ECharts 容器
                            var chartDom = document.getElementById('countData');

                            // 销毁之前的 ECharts 实例
                            if (chartDom.echartsInstance) {
                                chartDom.echartsInstance.dispose();
                            }

                            // 初始化 ECharts
                            var myChart = echarts.init(chartDom);
                            chartDom.echartsInstance = myChart; // 保存实例

                            var option = {
                                tooltip: {
                                    trigger: 'axis',
                                    formatter: function (params) { // 自定义提示框内容
                                        let result = `日期: ${params[0].axisValue}<br/>`; // 显示日期
                                        params.forEach(item => {
                                            result += `${item.seriesName}: ${item.data}<br/>`; // 显示数据
                                        });
                                        return result;
                                    }
                                },
                                dataZoom: [
                                    {
                                        show: true,
                                        realtime: true,
                                        start: 30,
                                        end: 70,
                                        xAxisIndex: [0, 1]
                                    },
                                    {
                                        type: 'inside',
                                        realtime: true,
                                        start: 30,
                                        end: 70,
                                        xAxisIndex: [0, 1]
                                    }
                                ],
                                xAxis: {
                                    type: 'category',
                                    data: dateData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: countData,
                                    type: 'line',
                                    smooth: true,
                                    name: '订单量' // 设置 series 的 name 属性
                                }]
                            };

                            myChart.setOption(option);

                            // 弹出层显示后调整 ECharts 尺寸
                            $('#orderHistory').on('shown.bs.modal', function () {
                                myChart.resize();
                            });

                            // 弹出层
                            $('#orderHistory').modal('show');


                        } else {
                            console.error("数据结构不符合预期！data.data 不是数组或不存在");
                        }
                    } else {
                        console.error("接口返回错误：", data.msg); // 使用 data.msg
                    }
                })
                .catch(error => {
                    console.error("请求失败：", error);
                });
        }
        function getUsersHistory(tid, tname) {
            $('#userHistoryTitle').html('<h5 class="card-title">【' + tname + '】新增用户历史</h5>');
            axios.get('/index/getNewUserHistory?tid=' + tid)
                .then(response => {
                    const data = response.data;

                    if (data.code == 200) {
                        // 清空#countData里的内容
                        // $('#countData').html('');

                        // 检查数据是否存在
                        if (data.data && Array.isArray(data.data)) {
                            // 提取 date 和 count 数据
                            const dateData = data.data.map(item => item.date);
                            const countData = data.data.map(item => Number(item.count)); // 转换为数字

                            // 确保 date 和 count 的长度一致
                            if (dateData.length !== countData.length) {
                                console.error("日期和用户量数据长度不一致！");
                                return; // 停止执行，防止 ECharts 渲染错误
                            }


                            // 获取 ECharts 容器
                            var chartDom = document.getElementById('userCountData');

                            // 销毁之前的 ECharts 实例
                            if (chartDom.echartsInstance) {
                                chartDom.echartsInstance.dispose();
                            }

                            // 初始化 ECharts
                            var myChart = echarts.init(chartDom);
                            chartDom.echartsInstance = myChart; // 保存实例

                            var option = {
                                tooltip: {
                                    trigger: 'axis',
                                    formatter: function (params) { // 自定义提示框内容
                                        let result = `日期: ${params[0].axisValue}<br/>`; // 显示日期
                                        params.forEach(item => {
                                            result += `${item.seriesName}: ${item.data}<br/>`; // 显示数据
                                        });
                                        return result;
                                    }
                                },
                                dataZoom: [
                                    {
                                        show: true,
                                        realtime: true,
                                        start: 30,
                                        end: 70,
                                        xAxisIndex: [0, 1]
                                    },
                                    {
                                        type: 'inside',
                                        realtime: true,
                                        start: 30,
                                        end: 70,
                                        xAxisIndex: [0, 1]
                                    }
                                ],
                                xAxis: {
                                    type: 'category',
                                    data: dateData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: countData,
                                    type: 'line',
                                    smooth: true,
                                    name: '新增用户量' // 设置 series 的 name 属性
                                }]
                            };

                            myChart.setOption(option);

                            // 弹出层显示后调整 ECharts 尺寸
                            $('#userHistory').on('shown.bs.modal', function () {
                                myChart.resize();
                            });

                            // 弹出层
                            $('#userHistory').modal('show');


                        } else {
                            console.error("数据结构不符合预期！data.data 不是数组或不存在");
                        }
                    } else {
                        console.error("接口返回错误：", data.msg); // 使用 data.msg
                    }
                })
                .catch(error => {
                    console.error("请求失败：", error);
                });
        }

        {/if}
    </script>
</body>

</html>
